<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>已有工作流</title>
<script src="js/jquery-1.9.1.min.js"></script>

<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css">

<script src="js/jquery.jtip.js"></script>
<link href="css/jquery.jtip.css" rel="stylesheet" type="text/css">

<script src="js/dump.js"></script>

<script src="js/rb.js"></script>
<link href="css/rb.css" rel="stylesheet" type="text/css">
<script>
var firstwidth = (FRAMEWIDTH-FRAMEWIDTH*1/2)-30;
var secondwidth = FRAMEWIDTH-FRAMEWIDTH*1/2;
$(document).ready(function() {
	
	$(".rb_mainframe_middle").eq(0).css("width",secondwidth+"px");
	$(".rb_mainframe_middle").eq(0).css("z-index","2");
	$(".rb_mainframe_middle").eq(1).css("width",firstwidth+"px");
	$(".rb_mainframe_middle_content").mCustomScrollbar({
    	theme:"dark",
		advanced:{updateOnContentResize:true}
	});
	$(".rb_mainframe_middle").eq(1).mCustomScrollbar({
    	theme:"dark",
		advanced:{updateOnContentResize:true}
	});
	$(".rb_mainframe_middle").eq(1).css("left",secondwidth+10+"px");
	$(".rb_mainframe_middle").eq(1).css("z-index","1");
	
	getFlowList();
	
	
});

//获取已有流程列表数据
function getFlowList(){
	$("#report tr").not(":first").remove();
	$.ajax({
		timeout:2000, 
		type: AJAXMETHOD,
        async: false,
        url: SERVER+"defaultWorkFlow/managerFlow?pageSize=100",
        dataType: AJAXJSON,
        jsonp: "callback",
        jsonpCallback:"callback",
        success: function(json){
			for (var i=0;i<json.respBody.data.length;i++){
				var iconUrl = "assets/no_img.png";
				if (json.respBody.data[i].icons.length>0){
					iconUrl = IMGURL+json.respBody.data[i].icons;
				}
				if (json.respBody.data[i].isValid == 0){
					$("#report").append("<tr id='"+json.respBody.data[i].id+"'><td><img class='report_tx' src='"+iconUrl+"' /></td><td>"+json.respBody.data[i].flowName+"</td><td>官方开发</td><td><a href=\"javascript:validFlow('"+json.respBody.data[i].id+"','"+json.respBody.data[i].flowName+"');\" id='item_"+json.respBody.data[i].id+"'>停用中</a></td><td><a href='editgzl.html' onclick=\"RB.Sstrorage(true,'flowid','"+json.respBody.data[i].id+"')\">编辑</a> <a href=\"javascript:showDeleteFlow('"+json.respBody.data[i].id+"')\">删除</a></td></tr>");
				}else{
					$("#report").append("<tr id='"+json.respBody.data[i].id+"'><td><img class='report_tx' src='"+iconUrl+"' /></td><td>"+json.respBody.data[i].flowName+"</td><td>官方开发</td><td><a href=\"javascript:disValidFlow('"+json.respBody.data[i].id+"','"+json.respBody.data[i].flowName+"');\" id='item_"+json.respBody.data[i].id+"' style='color:blue;'>启用中</a></td><td><a href='editgzl.html' onclick=\"RB.Sstrorage(true,'flowid','"+json.respBody.data[i].id+"')\">编辑</a> <a href=\"javascript:showDeleteFlow('"+json.respBody.data[i].id+"')\">删除</a></td></tr>");
				}
			}
			//底部占位
			$("#report").append("<tr height='150px;'></tr>");
			//默认第一个流程选中
			$("#report tr:nth-child(2) td").css("background-color","#fbe7ce");
			$("#report tr:nth-child(2) td").css("font-weight","bold");
			getFlowIdList($("#report tr:nth-child(2)").attr("id"));
			$(".rb_mainframe_middle_title").html($("#report tr:nth-child(2) td:nth-child(2)").text());
			//点击读取数据
			$("#report tr").click(function(){
				$("#report tr").each(function(){
					$(this).find("td").css("background-color","transparent");
					$(this).find("td").css("font-weight","normal");
					$("#change_mark").css("opacity","0.0");
				});
				$(this).find("td").css("background-color","#fbe7ce");
				$(this).find("td").css("font-weight","bold");
				var x=$(this).offset().top;
				var y=$(this).offset().left;
				$(this).css("top","106px");
				$(this).css("top","106px");
				$('.rb_mainframe_middle').eq(1).animate({left:0,width:0},50);
				$('.rb_mainframe_middle').eq(1).animate({left:secondwidth+10,width:firstwidth},300);
				
				getFlowIdList($(this).attr("id"));
				
				var str = $(this).find("td:eq(1)").text();
				$(".rb_mainframe_middle_title").html(str);
				//这里执行刷新人员列表代码
			
			});
        },
        error: function(){
            
    	}
	});	
}
//启用流程
function validFlow(id,flowname){
	RB.Alert("启用流程","您确定要启用'"+flowname+"'流程吗？","RB.Toast('启用流程成功！');");
}
//停用流程
function disValidFlow(id,flowname){
	RB.Alert("停用流程","您确定要停用'"+flowname+"'流程吗，停用后用户将不能使用该流程？","RB.Toast('停用流程成功！');");
}

//删除流程提示
function showDeleteFlow(id){
	RB.Alert("删除流程确认","你确认要删除该流程吗？删除后该流程将不可用！","deleteFlow('"+id+"')");
}

//删除流程
function deleteFlow(id){
	$.ajax({
		timeout:2000, 
		type: AJAXMETHOD,
        async: false,
        url: SERVER+"defaultWorkFlow/flow/delete?id="+id,
        dataType: AJAXJSON,
        jsonp: "callback",
        jsonpCallback:"callback",
        success: function(json){
			//dump(json);
			RB.Toast("<b>"+json.respMessage+"</b>");
			getFlowList();
        },
        error: function(){
            alert("delete error");
    	}
	});	
}

//删除流程实例提示
function showDeleteFlowInstances(id,flowId){
	RB.Alert("删除流程记录确认","你确认要删除该条流程记录吗？","deleteFlowInstances('"+id+"','"+flowId+"')");
}
//删除流程实例
function deleteFlowInstances(id,flowId){
	$.ajax({
		timeout:2000, 
		type: AJAXMETHOD,
        async: false,
        url: SERVER+"defaultWorkFlow/flowInstances/delete?flowId="+id,
        dataType: AJAXJSON,
        jsonp: "callback",
        jsonpCallback:"callback",
        success: function(json){
			//dump(json);
			RB.Toast("<b>"+json.respMessage+"</b>");
			getFlowIdList(flowId);
        },
        error: function(){
            alert("deleteFlowInstances error");
    	}
	});	
}

//获取某个流程列表数据
function getFlowIdList(flowId){
	$("#flowIdList tr:gt(0)").children().remove();
	$.ajax({
		timeout:2000, 
		type: AJAXMETHOD,
        async: false,
        url: SERVER+"defaultWorkFlow/flowInstances?flowId="+flowId,
        dataType: AJAXJSON,
        jsonp: "callback",
        jsonpCallback:"callback",
        success: function(json){
			if (json.respList.length<=0){
				$("#flowIdList").append("<tr><td colspan='5' align='center'>该流程下暂无记录</td></tr>");
			}else{
				for(var i=0;i<json.respList.length;i++){
					$("#flowIdList").append("<tr><td>"+json.respList[i].creator+"</td><td>"+json.respList[i].stateName+"</td><td>"+json.respList[i].nextApproval+"</td><td>"+json.respList[i].createDate+"</td><td><a href='javascript:showDeleteFlowInstances(\""+json.respList[i].id+"\",\""+json.respList[i].flowId+"\")'>删除</a></td></tr>");
					
				}
			}
				
        },
        error: function(){
            
    	}
	});	
}
</script>
<style type="text/css">
a{
	color 				: #ff0000;	
	text-decoration		: none;
}

a:hover{
	text-decoration		: underline;
}
.report { border-collapse:collapse;}
.report h4 { margin:0px; padding:0px;}
.report ul { margin:10px 0 10px 10px; padding:0px;}
.report ul li {
	float:left;
	width:30%;
	height:40px;
	list-style-type:none;
	padding:10px;
	font-size:15px;
}
.report ul li div {
	float:left;
	height:40px;
	line-height:40px;
	margin-left:10px;
	
}
.report ul li div:nth-child(2){
	font-weight:bold;
	width:50%;
}
.report table{ width:100%;}
.report th { background:#ce203b; color:#fff; padding:7px 15px; text-align:left;width:27%;height:30px;}
.report th:first-child {width:50px;}
.report td { background:#fff none repeat-x scroll center left; color:#000; padding:20px 10px;color:#5a3c44; border-bottom:#f0f0f0 1px solid; }
.report tr.odd td { background-color:transparent; cursor:pointer;color:#837076; }
.report tr.odd td.up { background:#fbe7ce; cursor:pointer; font-weight:bold; border-top:#FFF 1px solid; color:#5a3c44; }
.report tr.odd td.color { color:#fbe7ce;}
.report div.arrow { background:transparent url(assets/arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
.report div.up { background-position:0px 0px;}
.report_tx{
	width:40px;
	height:40px;
	background-size:40px 40px;
	float:left;
	border-radius:20px;
	box-shadow: 3px 3px 3px #888888;
}
#flowIdList th { background:#f0f0f0; color:#666; border-bottom:#cdcdcd solid 1px; padding:7px 15px; text-align:left;width:22%;height:30px;font-size:medium;}
#flowIdList th:last-child { width:50px;}
#flowIdList td { padding:10px 10px;}

.rb_mainframe_top_title_first{
	background-color:#ce203b;
	background-image:url(assets/top_bar_first_item_bg1.png);	
}

.rb_mainframe_middle_title{
	background-color:#ce203b;
}
</style>
</head>

<body onselectstart="return false"> 
<div class="rb_mainframe_top">
	<div class="rb_mainframe_top_title_first">
    	工作流程
    </div>
    <div class="rb_mainframe_top_title_second">
    	已有工作流
    </div>    
    <div class="rb_mainframe_top_btn">帮助</div>
    <div class="rb_mainframe_top_input"><img src="assets/top_input_icon_search.png"/><input type="text" placeholder="输入流程名..." name="searchDep" id="searchDep" /><input name="sumbit" type="button" value="搜索" onClick="searchDep()"></div>

</div>
<div class="rb_mainframe_content">
    <div class="rb_mainframe_middle">
        <div class="rb_mainframe_middle_content">
            <table id="report" class="report">
                <tr>
                    <th></th>
                    <th>工作流名</th>
                    <th>作者</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>             
            </table>
        </div>
    </div>
    <div class="rb_mainframe_middle">
        <div class="rb_mainframe_middle_title">XX流程</div>
        <table id="flowIdList" class="report">
        	<tr>
                <th>发起人</th>
                <th>当前步骤</th>
                <th>下步审批人</th>
                <th>创建时间</th>
                <th></th>
            </tr>             
        </table>
    </div>
</div>

<div id="change_mark"></div>
</body>
</html>
